<template>
  <div id="container">
    <strong>Second Page</strong>
    <!-- <div style="height: 100px; background-color: brown;"@click="handleClick">jump to </div> -->
    <p @click="handleClick" style="color: blue;">Explore UI Components</p>
  </div>
</template>

<script setup lang="ts">
import { useIonRouter } from '@ionic/vue';
const handleClick = () => {
  window.location.href = 'https://ionicframework.com/docs/components';
}
defineProps({
  name: String,
});
</script>

<style scoped>
#container {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

#container strong {
  font-size: 20px;
  line-height: 26px;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
}
</style>
